<template>
    <a-form class="smart-query-form">
        <a-row class="smart-query-form-row">
            <a-form-item label="变量类型" class="smart-query-form-item">
                <a-select v-model:value="queryParam.type" style="width: 200px" allowClear placeholder="请选择变量类型">

                    <a-select-option value="1">属性</a-select-option>
                    <a-select-option value="2">功能</a-select-option>
                    <a-select-option value="3">事件</a-select-option>
                </a-select>

            </a-form-item>
            <a-form-item label="变量名称" class="smart-query-form-item">
                <a-input style="width: 200px" v-model:value="queryParam.modelName" placeholder="请输入变量名称" />
            </a-form-item>

            <a-form-item class="smart-query-form-item smart-margin-left10">
                <a-button-group>
                    <a-button type="primary" @click="onSearch">
                        <template #icon>
                            <ReloadOutlined />
                        </template>
                        查询
                    </a-button>
                    <a-button @click="resetQuery">
                        <template #icon>
                            <SearchOutlined />
                        </template>
                        重置
                    </a-button>
                </a-button-group>
            </a-form-item>
        </a-row>
    </a-form>

    <a-card size="small" :bordered="true">
        <a-table size="small" bordered :loading="tableLoading" rowKey="departmentId" :columns="columns"
            :data-source="logData" :pagination="false" style="height: 450px;overflow-y: auto;">
            <template #bodyCell="{ record, column }">
                <template v-if="column.dataIndex === 'type'">
                    <a-tag v-if="record.type == 1" color="blue">属性</a-tag>
                    <a-tag v-if="record.type == 2" color="green">功能</a-tag>
                    <a-tag v-if="record.type == 3" color="yellow">事件</a-tag>
                </template>
                <template v-if="column.dataIndex === 'value'">
                    <span>{{ record.value }}{{ record.datatype.unit }}</span>
                </template>
            </template>
        </a-table>

        <div style="float: right;right: 10px;">
            <a-pagination v-model:current="queryParam.pageNum" v-model:page-size="queryParam.pageSize"
                :page-size-options="pageSizeOptions" :total="queryParam.total" show-size-changer
                @showSizeChange="onShowSizeChange" @change="onSizeChange">
            </a-pagination>
        </div>
    </a-card>
</template>

<script setup>
import { onMounted, reactive, ref, watch, createVNode } from 'vue';
import { logApi } from '/src/api/device/log';

import _ from 'lodash';

import { smartSentry } from '/src/lib/smart-sentry';
import { useRoute } from 'vue-router';
const route = useRoute();


// -----------------------  筛选 ---------------------
const queryParam = ref(
    {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        deviceId: route.query.deviceId,
        type: "",
        modelName: ""
    }
)

function changeCreateDate(dates, dateStrings) {
    queryForm.value.beginTime = dateStrings[0];
    queryForm.value.endTime = dateStrings[1];
}

function onShowSizeChange(current, size) {
    queryParam.value.pageNum = current;
    queryParam.value.pageSize = size;
    init()

}

function onSizeChange(page, pageSize) {
    queryParam.value.pageNum = page;
    queryParam.value.pageSize = pageSize;
    init()
}

const pageSizeOptions = ref(['10', '20', '30', '40', '50']);
// ----------------------- 部门树的展示 ---------------------
const tableLoading = ref(false);


const logData = ref([])

const columns = ref([
    {
        title: '变量ID',
        dataIndex: 'identifier',
        key: 'identifier',
    },
    {
        title: '变量类型',
        dataIndex: 'type',
        key: 'type',
    },
    {
        title: '变量名称',
        dataIndex: 'modelName',
        key: 'modelName',

    },
    {
        title: '更新事件',
        dataIndex: 'updateTime',
        key: 'updateTime',

    },
    {
        title: '当前值',
        dataIndex: 'value',
        key: 'value',
    },
]);

onMounted(() => {
    init();
});

// 查询部门列表并构建 部门树
async function init() {
   
    try {
        tableLoading.value = true;
        let res = await logApi.getlistThingsModelList(queryParam.value);

        logData.value = res.data.rows;
        queryParam.value.total = res.data.total

    } catch (e) {
        smartSentry.captureError(e);
    } finally {
        tableLoading.value = false;
    }
}

// 构建部门树
// function buildDepartmentTree(data, parentId) {
//     let children = data.filter((e) => e.parentId === parentId) || [];
//     if (!_.isEmpty(children)) {
//         children.forEach((e) => {
//             e.children = buildDepartmentTree(data, e.departmentId);
//         });
//         return children;
//     }
//     return null;
// }

// 重置
function resetQuery() {
    queryParam = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        deviceId: route.query.deviceId,
        type: "",
        modelName: ""
    }
    onSearch();
}

// 搜索
function onSearch() {
    init()
}




</script>

<style scoped lang="less"></style>